<template>
  <main role="main" class="main-container" ref="ProblemPageContainer" >
      <div class="problem-page-head" id="problem-page-header">
            <el-row>
                <el-col :span="10">

                    <el-tabs v-model="activeTabName" type="card" @tab-click="handleTabClick">
                        <el-tab-pane label="试题描述" name="problemDescriptionTab"></el-tab-pane>
                        <el-tab-pane label="提交记录" name="submitRecordTab"></el-tab-pane>
                    </el-tabs>
                </el-col>

                <el-col :span="4">
                    <el-select style="padding-top: 5px; padding-left: 5px"
                               placeholder="语言"
                               v-model="language"
                               @change="setHighlight()"
                    >
                        <el-option
                                v-for="item in languages"
                                :key="item.key"
                                :label="item.value"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>

                <el-col :span="8">

                </el-col>

                <el-col :span="2">
                    <el-icon style="margin-top: 20px;" color="#ffc107" @click="tipDialogVisible = true"><InfoFilled /></el-icon>
                </el-col>


            </el-row>
        </div>
  </main>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { languages } from 'prismjs';
export default {
    setup(){
      let viewData= reactive({
          activeTabName: 'problemDescriptionTab',//左侧导航栏切换
          language: TRAINING_LANGUAGES.C.value

      })
      function handleTabClick(tab, event) {
                console.log(tab, event);
        }
      function setHighlight() {
                if (language == TRAINING_LANGUAGES.C.value) {
                    languageMode = "text/x-csrc";

                }
                else if (language == TRAINING_LANGUAGES.CPlus.value) {
                    languageMode = "text/x-c++src";

                }
                else if (language == TRAINING_LANGUAGES.Java.value) {
                    languageMode = "text/x-java";

                }
                else if (language == TRAINING_LANGUAGES.Python.value) {
                    languageMode = "text/x-python";

                }

        }
      return{
          ...viewData,
          handleTabClick,
          setHighlight,
      }

    }
}
</script>

<style scoped>
.main-container {
        height: calc(100vh - 56px);
        width: 100%;
    }

    .problem-page-head {
        height: 56px;
    }


    .problem-description-code-container {

        height: calc(100vh - 56px - 56px - 70px);
    }

    .problem-description {
        height: calc(100vh - 56px - 56px - 70px);
    }

    .problemDetailTab {
        height: calc(100vh - 56px - 56px - 70px);
    }



    .problem-description-code-footer {
        margin-top: 20px;
        height: 50px;

    }

    th {
        font-weight: normal;
    }

    .success {
        color: #67c23a;
    }

    .warning {
        color: #ffc107;
    }

    .danger {
        color: #EF4743;
    }

    .error {
        color: #ff0400;
    }
</style>
